<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文本格式化属性</title>
		<!-- 文本格式化属性针对文本相关操作（4种方式，10个属性）
		     1.控制字体：font-family、font-size、font-weight
			 2.控制文本布局：text-aglin、line-height、letter-spacing、word-spacing
			 3.文本的修饰效果：text-decoration、text-shadow
			 4.处理文本的效果：white-space
		 -->
	 <style>
		 /* css3语法：选择器{
			          属性：属性值;
					  属性：属性值;
					  ......
		             } 
					 叫法：一个样式
		 */
		bod y div#d1{ /*通过加权方式，锁定元素  权值：102*/
			color: #9fce89;
			/*知识点1：文本格式化属性控制字体
			  font-family：字体家族，指定字体形式
			*/
			font-family: 华文彩云,sans-serif;
			/*设置多个字体：浏览器按照顺序寻找可用字体
			  用户体验，用户系统有什么字体，优先指定字体
			  通常与通配选择器使用  *{}
			*/
		    /*知识点2：文本格式化属性控制字体
			  font-size：字体大小属性，与单位共存
			  单位：px 像素  使用特点：绝对值、pc端
			       em 相对单位  理解：倍数
				               使用特点：相对父元素按照倍数方式、移动端
			*/
		   /*知识点3：文本格式化属性控制字体
		     font-weight：字体粗细属性，不存在单位
			              属性值：数值[100 200 300...900] 常用400
						         单词[normal=400、bold(加粗)、light]
		    使用方法：通配选择器搭配使用：指定全局字体正常粗细
		   */
		   font-size: 3em;
		   font-weight: light;
		   /*补充：1.英文大写 2.首字母大写 3.段落开始间距200px*/
		   text-transform: uppercase;
		   text-transform: capitalize;
		   text-indent: 200px;
		}
		d iv#d1{ /*通过加权方式，锁定元素  权值：101*/
			color: #8eafce;
			/*知识点4：文本格式属性控制文本格式[对齐、间隙]
			text-align(文本对齐属性)：left/right/center/justify(两端对齐)
			*/
		   text-align: justify;
		   /*知识点5.文本格式属性控制文本格式[对齐、间隙]
		     行高属性line-geight：文本垂直效果
			 使用效果：1.高度属性
			          2.在高度属性上加行高属性：属性值一致
		   */
		  border: 1px solid red;
		  height: 100px;
		  line-height: 100px;
		  /*补充：文本对齐和行高属于对齐 | 间隙：字符和单词之间的距离*/
		  
		  /*知识点6.letter-spacing：设置字符之间的间隙
		    知识点7.word-spacing：设置单词之间间隙
		  */
		 letter-spacing: 1px;
		 word-spacing: 10px;
		}
		#d1{ /*权重：100*/
			color: #ffdde8;
		}
		a.c1{
		/*文本修饰相关属性
		 知识点8.test-decoration属性：设置超链接效果
		        修饰超链接样式
				使用方法：与通配符一起使用，设置全局页面超链接样式
				属性值：none、underline、line-through
		*/
	    text-decoration: line-through;
		/* 知识点9.text-shadow 修饰文本阴影
		          属性值：X轴、Y轴、模糊距离(blur)、颜色(color)
		 */
		text-shadow: 3px 3px 3px #acc0ff;
		}
		p{
			border: 1px solid red;
			/* 知识点10.文本换行效果
			   white-space:文本换行属性
			   属性值：nowrap(不换行)、pre()、normal()
			 */
			white-space: pre;
		}
	 </style>
	</head>
	<body>
		<!-- 需求：创建div同时制定别名，添加假文【tab】
		           id选择器，通过加权找到div,添加颜色
		 -->
		 <div id="d1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero perspiciatis facilis cum, aspernatur dicta sit omnis assumenda rem itaque, eligendi nam quibusdam dolorum nemo harum eum praesentium cumque animi illo!</div>
		 <hr>
		 <h4>文本修饰效果</h4>
		 <a class="c1 c2" href="http://www.tsgzy.edu.cn">实现跳转【方式 6种】</a>
		 <div style="height: 80px;"></div>
		 <marquee >
		 	<h4>处理文本效果</h4>
		 </marquee>
		 <p>Lorem ipsum dolor sit, amet consectetur adipisici
		 ng elit. Cupiditate, fuga
		 . Facilis, asperiores harum. Omnis ab ex   pedita hic adipisci s
		 it, deserunt pariatur laboriosam corporis se  d praesentium! Dolores quod vitae volupt
		 atibus culpa. Lorem ipsum, dolor s
		 it amet consectetur adipisi       cing elit. Quisquam magnam di            stinctio exceptur
		 i sequi saepe. Asperiores iusto, eaque accusamus minima quas ex neque sunt deserunt nihil doloremque eos ea voluptate molestias! </p>
	</body>
</html>